<aside class="admonition important">
  <p>Starting with Trilium v0.97.0, the geo map has been converted from a standalone
    <a
    href="#root/_help_KSZ04uQ2D1St">note type</a>to a type of view for the&nbsp;<a class="reference-link"
      href="#root/_help_0ESUbbAxVnoK">Note List</a>.&nbsp;</p>
</aside>
<figure class="image image-style-align-center">
  <img style="aspect-ratio:892/675;" src="9_Geo Map View_image.png" width="892"
  height="675">
</figure>
<p>This note type displays the children notes on a geographical map, based
  on an attribute. It is also possible to add new notes at a specific location
  using the built-in interface.</p>
<h2>Creating a new geo map</h2>
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <figure class="image">
          <img style="aspect-ratio:483/413;" src="15_Geo Map View_image.png" width="483"
          height="413">
        </figure>
      </td>
      <td>Right click on any note on the note tree and select <em>Insert child note</em> → <em>Geo Map (beta)</em>.</td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <figure class="image image-style-align-center image_resized" style="width:53.44%;">
          <img style="aspect-ratio:1720/1396;" src="8_Geo Map View_image.png" width="1720"
          height="1396">
        </figure>
      </td>
      <td>By default the map will be empty and will show the entire world.</td>
    </tr>
  </tbody>
</table>

<h2>Repositioning the map</h2>
<ul>
  <li>Click and drag the map in order to move across the map.</li>
  <li>Use the mouse wheel, two-finger gesture on a touchpad or the +/- buttons
    on the top-left to adjust the zoom.</li>
</ul>
<p>The position on the map and the zoom are saved inside the map note and
  restored when visiting again the note.</p>
<h2>Adding a marker using the map</h2>
<h3>Adding a new note using the plus button</h3>
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>To create a marker, first navigate to the desired point on the map. Then
        press the
        <img src="10_Geo Map View_image.png">button in the&nbsp;<a href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>&nbsp;(top-right)
        area.&nbsp;&nbsp;&nbsp;
        <br>
        <br>If the button is not visible, make sure the button section is visible
        by pressing the chevron button (
        <img src="17_Geo Map View_image.png">) in the top-right of the map.</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="2_Geo Map View_image.png"
        width="1730" height="416">
      </td>
      <td>Once pressed, the map will enter in the insert mode, as illustrated by
        the notification.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br>
        <br>Simply click the point on the map where to place the marker, or the Escape
        key to cancel.</td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <img class="image_resized" style="aspect-ratio:1586/404;width:100%;" src="7_Geo Map View_image.png"
        width="1586" height="404">
      </td>
      <td>Enter the name of the marker/note to be created.</td>
    </tr>
    <tr>
      <td>4</td>
      <td>
        <img class="image_resized" style="aspect-ratio:1696/608;width:100%;" src="16_Geo Map View_image.png"
        width="1696" height="608">
      </td>
      <td>Once confirmed, the marker will show up on the map and it will also be
        displayed as a child note of the map.</td>
    </tr>
  </tbody>
</table>

<h3>Adding a new note using the contextual menu</h3>
<ol>
  <li>Right click anywhere on the map, where to place the newly created marker
    (and corresponding note).</li>
  <li>Select <em>Add a marker at this location</em>.</li>
  <li>Enter the name of the newly created note.</li>
  <li>The map should be updated with the new marker.</li>
</ol>
<h3>Adding an existing note on note from the note tree</h3>
<ol>
  <li>Select the desired note in the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</li>
  <li>Hold the mouse on the note and drag it to the map to the desired location.</li>
  <li>The map should be updated with the new marker.</li>
</ol>
<p>This works for:</p>
<ul>
  <li>Notes that are not part of the geo map, case in which a <a href="#root/_help_IakOLONlIfGI">clone</a> will
    be created.</li>
  <li>Notes that are a child of the geo map but not yet positioned on the map.</li>
  <li>Notes that are a child of the geo map and also positioned, case in which
    the marker will be relocated to the new position.</li>
</ul>
<aside class="admonition note">
  <p>Dragging existing notes only works if the map is in editing mode. See
    the <em>Read-only</em> section for more information.</p>
</aside>
<h2>How the location of the markers is stored</h2>
<p>The location of a marker is stored in the <code>#geolocation</code> attribute
  of the child notes:</p>
<img src="18_Geo Map View_image.png" width="1288"
height="278">
<p>This value can be added manually if needed. The value of the attribute
  is made up of the latitude and longitude separated by a comma.</p>
<h2>Repositioning markers</h2>
<p>It's possible to reposition existing markers by simply drag and dropping
  them to the new destination.</p>
<p>As soon as the mouse is released, the new position is saved.</p>
<p>If moved by mistake, there is currently no way to undo the change. If
  the mouse was not yet released, it's possible to force a refresh of the
  page (<kbd>Ctrl</kbd>+<kbd>R</kbd> ) to cancel it.</p>
<h2>Interaction with the markers</h2>
<ul>
  <li>Hovering over a marker will display a&nbsp;<a class="reference-link" href="#root/_help_lgKX7r3aL30x">Note Tooltip</a>&nbsp;with
    the content of the note it belongs to.
    <ul>
      <li>Clicking on the note title in the tooltip will navigate to the note in
        the current view.</li>
    </ul>
  </li>
  <li>Middle-clicking the marker will open the note in a new tab.</li>
  <li>Right-clicking the marker will open a contextual menu (as described below).</li>
  <li>If the map is in read-only mode, clicking on a marker will open a&nbsp;
    <a
    class="reference-link" href="#root/_help_ZjLYv08Rp3qC">Quick edit</a>&nbsp;popup for the corresponding note.</li>
</ul>
<h2>Contextual menu</h2>
<p>It's possible to press the right mouse button to display a contextual
  menu.</p>
<ol>
  <li>If right-clicking an empty section of the map (not on a marker), it allows
    to:
    <ol>
      <li>Displays the latitude and longitude. Clicking this option will copy them
        to the clipboard.</li>
      <li>Open the location using an external application (if the operating system
        supports it).</li>
      <li>Adding a new marker at that location.</li>
    </ol>
  </li>
  <li>If right-clicking on a marker, it allows to:
    <ol>
      <li>Displays the latitude and longitude. Clicking this option will copy them
        to the clipboard.</li>
      <li>Open the location using an external application (if the operating system
        supports it).</li>
      <li>Open the note in a new tab, split or window.</li>
      <li>Remove the marker from the map, which will remove the <code>#geolocation</code> attribute
        of the note. To add it back again, the coordinates have to be manually
        added back in.</li>
    </ol>
  </li>
</ol>
<h2>Icon and color of the markers</h2>
<figure class="image image-style-align-center">
  <img style="aspect-ratio:523/295;" src="Geo Map View_image.jpg" alt="image"
  width="523" height="295">
</figure>
<p>The markers will have the same icon as the note.</p>
<p>It's possible to add a custom color to a marker by assigning them a <code>#color</code> attribute
  such as <code>#color=green</code>.</p>
<h2>Adding the coordinates manually</h2>
<p>In a nutshell, create a child note and set the <code>#geolocation</code> attribute
  to the coordinates.</p>
<p>The value of the attribute is made up of the latitude and longitude separated
  by a comma.</p>
<h3>Adding from Google Maps</h3>
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <figure class="image image-style-align-center image_resized" style="width:56.84%;">
          <img style="aspect-ratio:732/918;" src="12_Geo Map View_image.png" width="732"
          height="918">
        </figure>
      </td>
      <td>Go to Google Maps on the web and look for a desired location, right click
        on it and a context menu will show up.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br>
        <br>Simply click on the first item displaying the coordinates and they will
        be copied to clipboard.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br>
        <br>Then paste the value inside the text box into the <code>#geolocation</code> attribute
        of a child note of the map (don't forget to surround the value with a <code>"</code> character).</td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <figure class="image image-style-align-center image_resized" style="width:100%;">
          <img style="aspect-ratio:518/84;" src="4_Geo Map View_image.png" width="518"
          height="84">
        </figure>
      </td>
      <td>In Trilium, create a child note under the map.</td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <figure class="image image-style-align-center image_resized" style="width:100%;">
          <img style="aspect-ratio:1074/276;" src="11_Geo Map View_image.png" width="1074"
          height="276">
        </figure>
      </td>
      <td>And then go to Owned Attributes and type <code>#geolocation="</code>, then
        paste from the clipboard as-is and then add the ending <code>"</code> character.
        Press Enter to confirm and the map should now be updated to contain the
        new note.</td>
    </tr>
  </tbody>
</table>

<h3>Adding from OpenStreetMap</h3>
<p>Similarly to the Google Maps approach:</p>
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <img class="image_resized" style="aspect-ratio:562/454;width:100%;" src="1_Geo Map View_image.png"
        width="562" height="454">
      </td>
      <td>Go to any location on openstreetmap.org and right click to bring up the
        context menu. Select the “Show address” item.</td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map View_image.png"
        width="696" height="480">
      </td>
      <td>The address will be visible in the top-left of the screen, in the place
        of the search bar.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br>
        <br>Select the coordinates and copy them into the clipboard.</td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <img class="image_resized" style="aspect-ratio:640/276;width:100%;" src="5_Geo Map View_image.png"
        width="640" height="276">
      </td>
      <td>Simply paste the value inside the text box into the <code>#geolocation</code> attribute
        of a child note of the map and then it should be displayed on the map.</td>
    </tr>
  </tbody>
</table>

<h2>Adding GPS tracks (.gpx)</h2>
<p>Trilium has basic support for displaying GPS tracks on the geo map.</p>
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <figure class="image image-style-align-center">
          <img style="aspect-ratio:226/74;" src="3_Geo Map View_image.png" width="226"
          height="74">
        </figure>
      </td>
      <td>To add a track, simply drag &amp; drop a .gpx file inside the geo map
        in the note tree.</td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <figure class="image image-style-align-center">
          <img style="aspect-ratio:322/222;" src="14_Geo Map View_image.png" width="322"
          height="222">
        </figure>
      </td>
      <td>In order for the file to be recognized as a GPS track, it needs to show
        up as <code>application/gpx+xml</code> in the <em>File type</em> field.</td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <figure class="image image-style-align-center">
          <img style="aspect-ratio:620/530;" src="6_Geo Map View_image.png" width="620"
          height="530">
        </figure>
      </td>
      <td>When going back to the map, the track should now be visible.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br>
        <br>The start and end points of the track are indicated by the two blue markers.</td>
    </tr>
  </tbody>
</table>
<aside class="admonition note">
  <p>The starting point of the track will be displayed as a marker, with the
    name of the note underneath. The start marker will also respect the icon
    and the <code>color</code> of the note. The end marker is displayed with
    a distinct icon.</p>
  <p>If the GPX contains waypoints, they will also be displayed. If they have
    a name, it is displayed when hovering over it with the mouse.</p>
</aside>
<h2>Read-only mode</h2>
<p>When a map is in read-only all editing features will be disabled such
  as:</p>
<ul>
  <li>The add button in the&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
  <li>Dragging markers.</li>
  <li>Editing from the contextual menu (removing locations or adding new items).</li>
</ul>
<p>To enable read-only mode simply press the <em>Lock</em> icon from the&nbsp;
  <a
  class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>. To disable it, press the button again.</p>
<h2>Configuration</h2>
<h3>Map Style</h3>
<p>The styling of the map can be adjusted in the <em>Collection Properties</em> tab
  in the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>&nbsp;or
  manually via the <code>#map:style</code> attribute.</p>
<p>The geo map comes with two different types of styles:</p>
<ul>
  <li>Raster styles
    <ul>
      <li>For these styles the map is represented as a grid of images at different
        zoom levels. This is the traditional way OpenStreetMap used to work.</li>
      <li>Zoom is slightly restricted.</li>
      <li>Currently, the only raster theme is the original OpenStreetMap style.</li>
    </ul>
  </li>
  <li>Vector styles
    <ul>
      <li>Vector styles are not represented as images, but as geometrical shapes.
        This makes the rendering much smoother, especially when zooming and looking
        at the building edges, for example.</li>
      <li>The map can be zoomed in much further.</li>
      <li>These come both in a light and a dark version.</li>
      <li>The vector styles come from <a href="https://versatiles.org/">VersaTiles</a>,
        a free and open-source project providing map tiles based on OpenStreetMap.</li>
    </ul>
  </li>
</ul>
<aside class="admonition note">
  <p>Currently it is not possible to use a custom map style.</p>
</aside>
<h3>Scale</h3>
<p>Activating this option via the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>&nbsp;or
  manually via <code>#map:scale</code> will display an indicator in the bottom-left
  of the scale of the map.</p>
<h2>Troubleshooting</h2>
<figure class="image image-style-align-right image_resized" style="width:34.06%;">
  <img style="aspect-ratio:678/499;" src="13_Geo Map View_image.png" width="678"
  height="499">
</figure>

<h3>Grid-like artifacts on the map</h3>
<p>This occurs if the application is not at 100% zoom which causes the pixels
  of the map to not render correctly due to fractional scaling. The only
  possible solution is to set the UI zoom at 100% (default keyboard shortcut
  is <kbd>Ctrl</kbd>+<kbd>0</kbd>).</p>